<template>
  <div class="cooperation">
    <div class="cooperation_main">
      <div class="ranking_main">
        <div class="explain">
          <div>榜单说明</div>
          <b></b>
          <p>实力榜是系统根据上月招商淘客在平台的 <span style="color:#F8E71C">放单数量、商品质量、信用分数、推广情况</span>等数据进行综合计算得出的排名，是<span
            style="color:#F8E71C">招商淘客</span>实力和能力等最好证明！榜单每月更新。</p>
        </div>
        <div class="achievement">
          <div class="achievement_main">
            <div class="show_date">
              <div>{{ moment(new Date()).add('year',0).format("YYYY.M") }}</div>
              <p>榜单成就</p>
            </div>
            <div class="show_num">
              <p class="show_up" v-show="topnumshow">{{ form.count }}</p>
              <p v-show="!topnumshow">
                <a-input placeholder="请输入提交商品款数" style="width:155px;margin:5px 0;" v-model="form.count" />
              </p>
              <p class="show_down">
                <a-icon type="rocket" theme="filled" class="icon" /><span>提交商品款数</span></p>
            </div>
            <div class="show_num">
              <p class="show_up" v-show="topnumshow">{{ form.shop_num }}</p>
              <p v-show="!topnumshow">
                <a-input placeholder="请输入服务商家" style="width:155px;margin:5px 0;" v-model="form.shop_num" />
              </p>
              <p class="show_down">
                <a-icon type="shop" theme="filled" class="icon" /><span>服务商家</span></p>
            </div>
            <div class="show_num">
              <p class="show_up" v-show="topnumshow">{{ form.today_num }}</p>
              <p v-show="!topnumshow">
                <a-input placeholder="请输入券发放量" style="width:155px;margin:5px 0;" v-model="form.today_num" />
              </p>
              <p class="show_down">
                <a-icon type="tags" theme="filled" class="icon" /><span>券发放量</span></p>
            </div>
            <div class="show_num">
              <p class="show_up" v-show="topnumshow">{{ form.price }}</p>
              <p v-show="!topnumshow">
                <a-input placeholder="请输入预估交易额" style="width:155px;margin:5px 0;" v-model="form.price" />
              </p>
              <p class="show_down">
                <a-icon type="dollar-circle" theme="filled" class="icon" /><span>预估交易额</span></p>
            </div>
          </div>
          <div class="tool_box">
            <div class="showtool" v-show="topnumshow">
              <a-icon type="tool" theme="filled" style="color:#fff" @click="topnumshow=!topnumshow" />
            </div>
            <div class="issave" v-show="!topnumshow">
              <a-button @click="dooff">取消</a-button>
              <a-button type="primary" @click="dosave">
                保存
              </a-button>
            </div>
          </div>
        </div>
        <div class="topthree">
          <div class="topthree_box top2" v-if="form.top[1]">
            <div class="top_main">
              <div class="useravatar">
                <span>{{ form.top[1].nickname }}</span>
                <p></p>
                <img :src="form.top[1].user_img" alt="" srcset="">
              </div>
              <p class="isfirm">企业账号</p>
              <p class="adept">{{ form.top[1].team_desc }}</p>
              <div class="userinfo">
                <div class="info_ox">
                  <div>{{ moment(form.top[1].create_at).format("YYYY-MM-DD") }}</div>
                  <p>入驻时间</p>
                </div>
                <div class="info_ox">
                  <div>{{ form.top[1].count }}</div>
                  <p>放单量</p>
                </div>
                <div class="info_ox">
                  <div>{{ form.top[1].fraction }}</div>
                  <p>信用分</p>
                </div>
              </div>
              <div class="bot_v">
                <div class="lv_box">
                  <span>等级:</span>
                  <!-- <i></i> -->
                  <span style="font-weight: 600;font-size:16px;">{{ form.top[1].level }}</span>
                </div>
                <a>QQ:{{ form.top[1].qq }}</a>
              </div>
            </div>
            <div class="showtool" v-show="topnumshow">
              <a-popconfirm title="确认删除该项吗?" ok-text="确定" cancel-text="取消" @confirm="deluser(form.top[1].id)">
                <a-icon type="delete" theme="filled" />
              </a-popconfirm>
              <a-icon type="tool" theme="filled" @click="doedit(form.top[1])" />
            </div>
          </div>
          <div class="topthree_box top1" v-if="form.top[0]">
            <div class="topmian">
              <div class="line_shadow"></div>
              <div class="top_main">
                <div class="useravatar">
                  <span>{{ form.top[0].nickname }}</span>
                  <p></p>
                  <img :src="form.top[0].user_img" alt="" srcset="">
                </div>
                <p class="isfirm">企业账号</p>
                <p class="adept">{{ form.top[0].team_desc }}</p>
                <div class="userinfo">
                  <div class="info_ox">
                    <div>{{ moment(form.top[0].create_at).format("YYYY-MM-DD") }}</div>
                    <p>入驻时间</p>
                  </div>
                  <div class="info_ox">
                    <div>{{ form.top[0].count }}</div>
                    <p>放单量</p>
                  </div>
                  <div class="info_ox">
                    <div>{{ form.top[0].fraction }}</div>
                    <p>信用分</p>
                  </div>
                </div>
                <div class="bot_v">
                  <div class="lv_box">
                    <span>等级:</span>
                    <!-- <i></i> -->
                    <span style="font-weight: 600;font-size:16px;">{{ form.top[0].level }}</span>
                  </div>
                  <a>QQ:{{ form.top[0].qq }}</a>
                </div>
              </div>
              <div class="line_shadow line2"></div>
            </div>
            <div class="showtool" v-show="topnumshow">
              <a-popconfirm title="确认删除该项吗?" ok-text="确定" cancel-text="取消" @confirm="deluser(form.top[0].id)">
                <a-icon type="delete" theme="filled" />
              </a-popconfirm>
              <a-icon type="tool" theme="filled" @click="doedit(form.top[0])" />
            </div>
          </div>
          <div class="topthree_box top3" v-if="form.top[2]">
            <div class="top_main">
              <div class="useravatar">
                <span>{{ form.top[2].nickname }}</span>
                <p></p>
                <img :src="form.top[2].user_img" alt="" srcset="">
              </div>
              <p class="isfirm">企业账号</p>
              <p class="adept">{{ form.top[2].team_desc }}</p>
              <div class="userinfo">
                <div class="info_ox">
                  <div>{{ moment(form.top[2].create_at).format("YYYY-MM-DD") }}</div>
                  <p>入驻时间</p>
                </div>
                <div class="info_ox">
                  <div>{{ form.top[2].count }}</div>
                  <p>放单量</p>
                </div>
                <div class="info_ox">
                  <div>{{ form.top[2].fraction }}</div>
                  <p>信用分</p>
                </div>
              </div>
              <div class="bot_v">
                <div class="lv_box">
                  <span>等级:</span>
                  <!-- <i></i> -->
                  <span style="font-weight: 600;font-size:16px;">{{ form.top[2].level }}</span>
                </div>
                <a>QQ:{{ form.top[2].qq }}</a>
              </div>
            </div>
            <div class="showtool" v-show="topnumshow">
              <a-popconfirm title="确认删除该项吗?" ok-text="确定" cancel-text="取消" @confirm="deluser(form.top[2].id)">
                <a-icon type="delete" theme="filled" />
              </a-popconfirm>
              <a-icon type="tool" theme="filled" @click="doedit(form.top[2])" />
            </div>
          </div>
        </div>
        <div class="rankingList" v-if="form.top.length>3">
          <div class="list_main">
            <a-row type="flex" justify="space-around" align="middle">
              <a-col :span="8" v-for="(item,index) in form.top.slice(3)" :key="index">
                <div class="rank_box">
                  <div class="top_main">
                    <div class="useravatar">
                      <img :src="item.user_img" alt="" srcset="">
                      <div class="user_right">
                        <p>{{ item.nickname }}</p>
                        <p class="adept">{{ item.team_desc }}</p>
                        <p class="isfirm">企业账号</p>
                      </div>
                    </div>
                    <div class="rank_mark">{{ index+4 }}</div>
                    <div class="userinfo">
                      <div class="info_ox">
                        <div>{{ moment(item.create_at).format("YYYY-MM-DD") }}</div>
                        <p>入驻时间</p>
                      </div>
                      <div class="info_ox">
                        <div>{{ item.count }}</div>
                        <p>放单量</p>
                      </div>
                      <div class="info_ox">
                        <div>{{ item.fraction }}</div>
                        <p>信用分 </p>
                      </div>
                    </div>
                    <div class="bot_v">
                      <div class="lv_box">
                        <span>等级:</span>
                        <!-- <i></i> -->
                        <span style="font-weight: 600;font-size:16px;">{{ item.level }}</span>
                      </div>
                      <a>QQ:{{ item.qq }}</a>
                    </div>
                  </div>
                  <div class="showtool" v-show="topnumshow">
                    <a-popconfirm title="确认删除该项吗?" ok-text="确定" cancel-text="取消" @confirm="deluser(item.id)">
                      <a-icon type="delete" theme="filled" />
                    </a-popconfirm>
                    <a-icon type="tool" theme="filled" @click="doedit(item)" />
                  </div>
                </div>
              </a-col>
            </a-row>

          </div>
        </div>
      </div>
      <a-modal :title="isadd?'增加商家':'修改商家'" :visible="visible" @ok="handleOk" @cancel="handleCancel">
        <div>
          <a-form-model :model="update" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-form-model-item label="用户昵称">
              <a-input v-model="update.nickname" allowClear />
            </a-form-model-item>
            <a-form-model-item label="用户头像">
              <a-input v-model="update.user_img" allowClear />
              <div class="userimg">
                <a-upload
                  v-if="update.user_img==''"
                  name="file"
                  action="https://jfk-api.letuilm.com/api/upload_img"
                  list-type="picture-card"
                  :multiple="false"
                  :show-upload-list="false"
                  :before-upload="beforeUpload"
                  @change="handleChange3">
                  <div class="nogoodsimg">
                    <div class="no_main">
                      <a-icon type="fund" />
                      <p>
                        请上传头像
                      </p>
                    </div>
                  </div>
                </a-upload>
                <div
                  v-else
                  class="img_box">
                  <a-avatar
                    :src="update.user_img"
                    :size="100"
                    icon="user" />
                  <a-icon
                    type="close-circle"
                    @click="closeimg" />
                </div>
              </div>
            </a-form-model-item>
            <a-form-model-item label="用户介绍">
              <a-input v-model="update.team_desc" allowClear />
            </a-form-model-item>
            <a-form-model-item label="放单量">
              <a-input v-model="update.count" allowClear />
            </a-form-model-item>
            <a-form-model-item label="信用分">
              <a-input v-model="update.fraction" />
            </a-form-model-item>
            <a-form-model-item label="用户等级">
              <a-select default-value="lv1" v-model="update.level">
                <a-select-option value="lv1">
                  lv1
                </a-select-option>
                <a-select-option value="lv2">
                  lv2
                </a-select-option>
                <a-select-option value="lv3">
                  lv3
                </a-select-option>
                <a-select-option value="lv4">
                  lv4
                </a-select-option>
                <a-select-option value="lv5">
                  lv5
                </a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="用户QQ">
              <a-input v-model="update.qq" allowClear />
            </a-form-model-item>
            <a-form-model-item label="用户排名">
              <a-input v-model="update.sort" allowClear />
            </a-form-model-item>
            <a-form-model-item label="入驻时间">
              <!-- <a-input v-model="update.create_at" allowClear /> -->
              <a-date-picker v-model="time" @change="timeChange" allowClear />
            </a-form-model-item>
          </a-form-model>
        </div>
      </a-modal>
      <div class="fixed_box">
        <div>
          <a-button @click="doadd">点击新增</a-button>
        </div>
        <div>
          <a-button @click="getShopDataList">获取真实</a-button>
        </div>
        <div>
          <a-button @click="getCacheList">获取虚拟</a-button>
        </div>
        <div>
          <a-tag
            :color="istrue?'blue':'red'"
            style="width:88px;height:33px;line-height:33px;font-size:14px;text-align:center">
            当前:{{ istrue?"真实":"虚拟" }}
          </a-tag>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import moment from 'moment'
  import {
    getShopDataList,
    setTopGoodsData,
    getCacheList
  } from '@/api/cooperation'

  export default {
    name: 'Cooperation',
    data () {
      return {
        moment,
        istrue: true,
        isadd: true,
        labelCol: {
          span: 5
        },
        wrapperCol: {
          span: 14
        },
        visible: false,
        topnumshow: true,
        count: 0,
        shop_num: 0,
        today_num: 0,
        price: 0,
        form: {
          count: 0,
          shop_num: 0,
          today_num: 0,
          price: 0,
          top: [{
              id: '',
              count: '',
              create_at: null,
              fraction: 100,
              level: '',
              nickname: '',
              qq: '',
              team_desc: '',
              user_img: '',
              sort: ''
            },
            {
              id: '',
              count: '',
              create_at: null,
              fraction: 100,
              level: '',
              nickname: '',
              qq: '',
              team_desc: '',
              user_img: '',
              sort: ''
            },
            {
              id: '',
              count: '',
              create_at: null,
              fraction: 100,
              level: '',
              nickname: '',
              qq: '',
              team_desc: '',
              user_img: '',
              sort: ''
            }
          ]
        },
        update: {
          id: '',
          count: '',
          create_at: null,
          fraction: 100,
          level: 'lv1',
          nickname: '',
          qq: '',
          team_desc: '',
          user_img: '',
          sort: ''
        },
        time: moment(new Date())
      }
    },
    watch: {},
    computed: {

    },
    created () {
      this.getShopDataList()
    },
    mounted () {},
    methods: {
         closeimg () {
        this.update.user_img = ''
      },
      beforeUpload (file) {
        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
        if (!isJpgOrPng) {
          this.$message.error('对不起,只支持jpg/png格式的图片!')
        }
        const isLt2M = file.size / 1024 / 1024 < 5
        if (!isLt2M) {
          this.$message.error('对不起!图片大小超过5M!')
        }
        return isJpgOrPng && isLt2M
      },
      handleChange3 (info) {
        console.log('info', info)
        if (info.file.response.data) {
          this.update.user_img = `//` + info.file.response.data.url
        }
      },
      timeChange (date, dateString) {
        console.log(date, dateString)
        this.update.create_at = dateString
      },
      doadd () {
        this.visible = true
        this.isadd = true
        // this.update={}
      },
      // 获取虚拟
      getCacheList () {
        getCacheList()
          .then(res => {
            if (res.code === 200) {
              this.istrue = false
              console.log('虚拟返回', res)
              this.form.count = res.data.goods_num
              this.form.shop_num = res.data.shop_num
              this.form.today_num = res.data.coupon_num
              this.form.price = res.data.price
              this.form.top = res.data.top_array
              console.log('虚拟this.form', this.form)
              this.count = res.data.goods_num
              this.shop_num = res.data.shop_num
              this.today_num = res.data.coupon_num
              this.price = res.data.price
            } else {
              this.$message.info(res.msg)
            }
          })
          .catch(err => {
            console.log(err)
          })
      },

      dooff () {
        this.form.count = this.count
        this.form.shop_num = this.shop_num
        this.form.today_num = this.today_num
        this.form.price = this.price
        this.topnumshow = !this.topnumshow
      },
      dosave () {
        this.setTopGoodsData()
      },
      // 设置虚拟接口
      setTopGoodsData () {
        setTopGoodsData({
            goods_num: this.form.count,
            shop_num: this.form.shop_num,
            coupon_num: this.form.today_num,
            price: this.form.price,
            top_array: this.form.top
          })
          .then(res => {
            if (res.code === 200) {
              if (this.istrue === true) {
                this.getShopDataList()
              } else {
                this.getCacheList()
              }
              this.handleCancel()
              // console.log('修改返回', res)
              this.topnumshow = true
              this.$message.success('修改成功!')
            } else {
              this.$message.info(res.msg)
            }
          })
          .catch(err => {
            console.log(err)
          })
      },

      handleOk (e) {
        // console.log(this.update)
        if (this.isadd === false) {
          this.setTopGoodsData()
        } else {
          this.form.top.push(this.update)
          this.setTopGoodsData()
        }
      },
      handleCancel (e) {
        this.visible = false
        this.update = {
          fraction: 100,
          level: 'lv1'
        }
      },
      doedit (row) {
        this.isadd = false
        console.log(row)
        this.update = row
        this.time = this.update.create_at
        this.visible = true
      },
      deluser (val) {
        console.log(val)
        for (const i in this.form.top) {
          if (this.form.top[i].id === val) {
            console.log(this.form.top[i])
            this.form.top.splice(i, 1)
          }
        }
        this.setTopGoodsData()
      },
      // 获取商家合作榜真实
      getShopDataList () {
        getShopDataList()
          .then(res => {
            if (res.code === 200) {
              this.istrue = true
              console.log('商家合作榜返回', res)
              this.form = res.data
              this.count = res.data.count
              this.shop_num = res.data.shop_num
              this.today_num = res.data.today_num
              this.price = res.data.price
            } else {
              this.$message.info(res.msg)
            }
          })
          .catch(err => {
            console.log(err)
          })
      }
    }
  }
</script>

<style lang="less" scoped>
  .userimg {
      .img_box {
        position: relative;
        width: 100px;
      }

      /deep/.ant-upload {
        border-radius: 50%;
        padding: 0px;
      }

      .anticon-close-circle {
        position: absolute;
        top: 0;
        right: 0;
        font-size: 16px;
        cursor: pointer;
        display: none;
        z-index: 3;
        transition: all 0.3s linear;
      }

      .img_box:hover {
        .anticon-close-circle {
          display: block;
        }
      }

      .anticon-close-circle:hover {
        display: block;
        transform: rotate(90deg);
      }
    }
  .ranking_main {
    width: 100%;
    height: 2000px;
    background: url(//img.letuilm.com/2020/07/91cb082020072914455070997.jpg) no-repeat top;
    background-color: #2B1B97;

    p {
      margin: 0;
    }

    .explain {
      padding-top: 650px;
      color: #FF8DFF;
      width: 600px;
      margin: auto;
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      text-align: left;

      div {
        font-size: 18px;
        padding-right: 10px;
      }

      b {
        width: 1px;
        overflow: hidden;
        height: 42px;
        position: relative;
        top: 4px;
        z-index: 0;
        background: #FF8DFF;
      }

      p {
        line-height: 23px;
        padding-left: 10px;
        font-size: 14px;

      }
    }

    .achievement {
      width: 1045px;
      height: 138px;
      margin: 0 auto;
      background: url("~@/assets/imgs/ran_icon.png") no-repeat center;
      position: relative;

      .tool_box {
        position: absolute;
        top: -13px;
        right: 0;
        display: none;

        .showtool {
          width: 30px;
          height: 30px;
          padding: 5px;
          border-radius: 50%;
          border: 1px solid #fff;
          cursor: pointer;

          .anticon {
            transition: all 0.5s linear;
            font-size: 18px;
          }
        }
      }

      .tool_box:hover {
        .anticon {
          transform: rotate(720deg);
        }
      }

      .achievement_main {
        width: 850px;
        height: 138px;
        margin: 0 auto;
        padding-top: 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: aliceblue;

        .show_num {
          width: 155px;

          .show_up {
            height: 42px;
            line-height: 42px;
            font-size: 36px;
            color: #FFDD5F;
            display: block;
            text-align: center;
          }

          .show_down {
            font-size: 14px;
            text-align: center;
            line-height: 21px;
            display: flex;
            justify-content: center;
            align-items: center;

            /deep/.icon {
              font-size: 20px;
              color: #FFAEAE;
            }
          }
        }

        .show_date {
          font-size: 24px;

          p {
            font-size: 30px;
          }
        }
      }
    }

    .achievement:hover {
      .tool_box {
        display: block;
      }
    }

    .topthree {
      width: 1060px;
      height: 355px;
      margin: auto auto 40px;
      padding-top: 10px;
      display: flex;
      justify-content: center;
      align-items: center;

      .topthree_box {
        margin-top: 40px;
        position: relative;

        .showtool {
          position: absolute;
          top: 0px;
          left: 0;
          width: 70px;
          height: 30px;
          line-height: 30px;
          border-top-left-radius: 17px;
          border-top-right-radius: 20px;
          border-bottom-right-radius: 20px;
          border: 1px solid #260049;
          text-align: center;
          z-index: 8;
          display: none;

          .anticon {
            margin: 5px;
            border: 1px solid;
            border-radius: 50%;
            color: #5c8eff;
            transition: all 0.5s linear;
            font-size: 18px;
          }

          .anticon-delete {
            color: red;
          }

          .anticon:hover {
            transform: rotate(360deg);
          }
        }

        .top_main {
          width: 351px;
          height: 300px;
          background: #fff;
          padding: 0 15px;
          border-radius: 20px 0 0 20px;
          //   cursor: pointer;
          z-index: 2;

          .useravatar {
            display: block;
            width: 176px;
            height: 160px;
            position: relative;
            overflow: hidden;
            margin: auto;
            color: #999;
            top: 0;

            p {
              background: url('~@/assets/imgs/topthree.png') -352px 0;
              width: 176px;
              height: 165px;
              position: absolute;
              top: 0;
              left: 0;
              z-index: 6;
            }

            span {
              height: 35px;
              line-height: 25px;
              text-align: center;
              z-index: 8;
              bottom: 0;
              position: absolute;
              width: 100%;
              display: block;
              font-size: 14px;
              color: #496B87;
            }

            img {
              width: 100px;
              height: 100px;
              object-fit: fill;
              display: block;
              margin: auto;
              position: relative;
              top: 30px;
              z-index: 0;
            }
          }

          .isfirm {
            background: url("~@/assets/imgs/v_icon.png") no-repeat center;
            background-size: 100%;
            width: 70px;
            color: #fff;
            text-align: center;
            display: block;
            height: 16px;
            line-height: 16px;
            padding-left: 10px;
            margin: auto;
            position: relative;
            z-index: 2;
            font-size: 12px;
          }

          .adept {
            font-size: 12px;
            color: #A86BDD;
            text-align: center;
            height: 30px;
            line-height: 30px;
          }

          .userinfo {
            position: relative;
            height: 40px;
            line-height: 20px;
            font-size: 12px;
            color: #333C48;

            .info_ox {
              float: left;
              width: 33.2%;
              text-align: center;
              // position: relative;
              border-right: 1px solid #dfdfdf;
              z-index: 0;

              div {
                color: #FC9F1F;
                font-size: 16px;
                display: block;
              }
            }

            .info_ox:nth-last-child(1) {
              border: none;
            }
          }

          .bot_v {
            width: 285px;
            margin: auto;
            padding-top: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .lv_box {
              display: flex;
              align-items: center;
            }

            span {
              // float: left;
              line-height: 22px;
            }

            i {
              display: inline-block;
              background: url('~@/assets/imgs/lv.png') left top;
              width: 45px;
              height: 20px;
            }

            a {
              // float: right;
              border: 1px solid #5294E0;
              color: #5294E0;
              border-radius: 15px;
              font-size: 14px;
              padding: 3px 10px;
            }

            a:hover {
              color: #fff;
              border-color: #5294E0;
              background: #5294E0;
            }
          }
        }
      }

      .top1 {
        margin-top: 0px;
        position: relative;

        .topmian {
          display: flex;

        }

        .line_shadow {
          width: 6px;
          height: 180px;
          background-color: #D8D8D8;
          transform: rotate(-2deg);
          position: absolute;
          top: 40px;
          left: -3px;
        }

        .line2 {
          z-index: 4;
          left: 348px;
          transform: rotate(2deg);
        }

        .top_main {
          border: none;
          border-radius: 20px 20px 0 0;
          z-index: 5;
          top: 30px;
          height: 340px;

          .useravatar {
            top: 20px;
            margin-bottom: 35px;
            height: 155px;

            span {
              line-height: 35px;
            }

            p {
              background-position: 0 0;
            }
          }

          .adept {
            margin-bottom: 10px;
          }

          .userinfo {
            margin-top: 10px;
          }
        }
      }

      .top3 {
        .top_main {
          border-radius: 0 20px 20px 0;

          // top: 60px;
          // height: 270px;
          .useravatar {
            span {
              bottom: 13px;
            }

            p {
              background-position: -176px 0;
            }
          }
        }

        .showtool {
          border-top-left-radius: 0;
        }
      }

      .topthree_box:hover {
        .showtool {
          display: block;
        }

        .top_main {
          background: #F7EEFF;
        }
      }

      .top2:hover {
        .useravatar {
          p {
            background-position: -352px -176px;
          }
        }
      }

      .top1:hover {
        .useravatar {
          p {
            background-position: 0 -176px;
          }
        }
      }

      .top3:hover {
        .useravatar {
          p {
            background-position: -176px -176px;
          }
        }
      }
    }

    .rankingList {
      width: 1090px;
      margin: auto;
      border-radius: 12px;
      padding: 20px 5px;
      background-color: #8F39DC;

      .list_main {
        .rank_box {
          width: 339px;
          margin: 0 auto;
          // background-color: #fff;
          position: relative;

          .showtool {
            position: absolute;
            top: 0px;
            left: 0;
            width: 70px;
            height: 30px;
            line-height: 30px;
            border-top-left-radius: 17px;
            border-top-right-radius: 20px;
            border-bottom-right-radius: 20px;
            border: 1px solid #260049;
            text-align: center;
            z-index: 8;
            display: none;

            .anticon {
              margin: 5px;
              border: 1px solid;
              border-radius: 50%;
              color: #5c8eff;
              transition: all 0.5s linear;
              font-size: 18px;
            }

            .anticon-delete {
              color: red;
            }

            .anticon:hover {
              transform: rotate(360deg);
            }
          }

          .top_main {
            height: 260px;
            background: #fff;
            padding: 0 15px;
            cursor: pointer;
            z-index: 2;
            position: relative;
            overflow: hidden;
            border-radius: 12px;

            .useravatar {
              padding: 30px 0;
              display: flex;
              justify-content: flex-start;
              align-items: center;

              img {
                display: inline-block;
                width: 60px;
                height: 60px;
                margin-left: 35px;
                border: 2px solid #C2D2E0;
                // float: left;
                overflow: hidden;
                border-radius: 200px;
              }

              .user_right {
                margin-left: 10px;
                text-align: left;
              }
            }

            .rank_mark {
              position: absolute;
              right: -50px;
              top: -50px;
              width: 100px;
              height: 100px;
              border-radius: 50%;
              padding: 43px 45px 10px 10px;
              font-size: 24px;
              color: #9013FE;
              background: #FEDF65;
              text-align: center;
              line-height: 50px;
            }

            .isfirm {
              background: url("~@/assets/imgs/v_icon.png") no-repeat center;
              background-size: 100%;
              width: 70px;
              color: #fff;
              text-align: center;
              display: block;
              height: 16px;
              line-height: 16px;
              padding-left: 10px;
              margin: auto;
              position: relative;
              z-index: 2;
              font-size: 12px;
            }

            .adept {
              font-size: 12px;
              color: #A86BDD;
              margin-bottom: 5px;
            }

            .userinfo {
              position: relative;
              height: 40px;
              line-height: 20px;
              font-size: 12px;
              color: #333C48;

              .info_ox {
                float: left;
                width: 33.2%;
                text-align: center;
                // position: relative;
                border-right: 1px solid #dfdfdf;
                z-index: 0;

                div {
                  color: #FC9F1F;
                  font-size: 16px;
                  display: block;
                }
              }

              .info_ox:nth-last-child(1) {
                border: none;
              }
            }

            .bot_v {
              width: 300px;
              height: 50px;
              margin: 30px auto 0 auto;
              display: flex;
              justify-content: space-between;
              align-items: center;

              .lv_box {
                display: flex;
                align-items: center;
              }

              span {
                // float: left;
                line-height: 22px;
              }

              i {
                display: inline-block;
                background: url('~@/assets/imgs/lv.png') left top;
                width: 45px;
                height: 20px;
              }

              a {
                // float: right;
                border: 1px solid #5294E0;
                color: #5294E0;
                border-radius: 15px;
                font-size: 14px;
                padding: 3px 10px;
              }

              a:hover {
                color: #fff;
                border-color: #5294E0;
                background: #5294E0;
              }
            }
          }
        }

        .rank_box:hover {
          .top_main {
            background-color: #F7EEFF;
          }

          .showtool {
            display: block;
          }
        }
      }
    }
  }

  .cooperation {
    width: 100%;

    .cooperation_main {
      // width: 1280px;
      margin: 0 auto;

    }

    .fixed_box {
      position: fixed;
      top: 50%;
      right: 30px;
    }

    // .virtual_box
  }
</style>
